<template>
	<view id="mySignUp">
		<ul class="auth-wrap">
			<li class="norm-single-li auth-info">
				<h5>姓名</h5>
				<p>{{voteUserinfo.full_name}}</p>
			</li>
			<li class="norm-single-li auth-info">
				<h5>电话</h5>
				<p>{{voteUserinfo.telephone}}</p>
			</li>
			<li class="norm-single-li auth-info">
				<h5>楼号</h5>
				<p>{{voteUserinfo.building_number}}</p>
			</li>
			<li class="norm-single-li auth-info">
				<h5>年龄</h5>
				<p>{{userData.userAge}}</p>
			</li>
			<li class="norm-single-li auth-info">
				<h5>性别</h5>
				<p>{{userData.userSex==1?"男":userData.userSex==2?"女":"暂无"}}</p>
			</li>
			<li class="norm-single-li auth-info">
				<h5>民族</h5>
				<input type="text" v-model="applicationForm.user_nation" placeholder="请输入民族" />
			</li>
			<li class="norm-single-li auth-info" @click="isShow = true">
				<h5>政治面貌</h5>
				<p style="margin-left: auto;margin-right: 10rpx;">{{applicationForm.user_olitical_outlook}}</p>
				<u-icon color="#ccc" name="arrow-right"></u-icon>
			</li>

			<li class="norm-single-li auth-info">
				<h5>单位及职务</h5>
				<input type="text" v-model="applicationForm.company" placeholder="请输入单位及职务" />
			</li>
			<li class="norm-single-li auth-info">
				<h5>个人宣言</h5>
				<input type="text" v-model="applicationForm.user_declaration" placeholder="请输入个人宣言" />
			</li>


			<li class="norm-single-li auth-info">
				<h5>上传冠冕照</h5>
				<p>
					<view class="guarn-box">
						<view class="guarn-box-img" @click="uoloadHouse(1)" v-if="!imgFlag1">
							<image class="u-m-t-72" src="/static/image/camera.svg"></image>
						</view>
						<view v-else class="guarn-box2-img">
							<image :src="img1" style="width:224rpx;height:224rpx;"></image>
							<u-icon @click="colseImg(1)" name="close" color="red" size="40"
								class="guarn-box2-img-close"></u-icon>
						</view>
					</view>
				</p>
			</li>
			<li class="norm-single-li auth-info">
				<h5>上传缴费证明</h5>
				<p>
					<view class="guarn-box">
						<view class="guarn-box-img" @click="uoloadHouse(2)" v-if="!imgFlag2">
							<image class="u-m-t-72" src="/static/image/camera.svg" mode=""></image>
						</view>
						<view v-else class="guarn-box2-img">
							<image :src="img2" style="width:224rpx;height:224rpx;"></image>
							<u-icon @click="colseImg(2)" name="close" color="red" size="40"
								class="guarn-box2-img-close"></u-icon>
						</view>
					</view>
				</p>
			</li>
			<li class="norm-single-li auth-info">
				<h5>其他辅助材料 </h5>
				<h6>(选填)</h6>
				<p>
					<view class="guarn-box">
						<view class="guarn-box-img" @click="uoloadHouse(3)" v-if="!imgFlag3">
							<image class="u-m-t-72" src="/static/image/camera.svg" mode=""></image>
						</view>
						<view v-else class="guarn-box2-img">
							<image :src="img3" style="width:224rpx;height:224rpx;"></image>
							<u-icon @click="colseImg(3)" name="close" color="red" size="40"
								class="guarn-box2-img-close"></u-icon>
						</view>
					</view>
				</p>
			</li>
		</ul>
		<view class="publicity-btn" @click="submitApplication()">
			提交报名
		</view>
		<view style="height: 40rpx;"></view>
		<view>
			<u-action-sheet :list="list" v-model="isShow" @click="identityFun"></u-action-sheet>
		</view>
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/utils/image-tool.js'
	export default {
		data() {
			return {
				//报名表单
				applicationForm: {
					voteUserId: null, //认证用户id
					applicationType: null, //报名类型 1.筹备组报名
					user_nation: null, //民族
					user_olitical_outlook: null, //政治面貌
					user_declaration: null, //个人宣言
					user_coronal_photograph_img: null, //冠冕照,
					user_consumption_proof_img: null, //缴费证明
					user_other_img: null, //其它材料
					company: null, //单位
				},

				//展示认证用户信息
				voteUserinfo: {

				},
				publicityId: null, //公示id



				isShow: false,
				identityStr: '党员',
				list: [{
						text: '党员'
					},
					{
						text: '团员'
					},
					{
						text: '群众'
					},
				],
				imgArr: [], //上传照片
				imgFlag1: false,
				img1: '',
				imgFlag2: false,
				img2: '',
				img3: '',
				imgFlag3: false,
				user_id: uni.getStorageSync('rawData').userId,

				userData: [],
				id: null,

				user_declaration: null,
				company: null,
				user_nation: null,

				ownerInformation: {},
			}
		},

		onLoad(options) {
			this.applicationForm.voteUserId = options.id
			this.applicationForm.applicationType = options.applicationType
			this.publicityId = options.publicityId;
			//获取认证信息
			this.getVoteUserInfo();
		},
		onShow() {
			//获取基本展示信息
			this.getUserInformationCdo();
		},




		methods: {
			//提交报名表单
			submitApplication() {
				this.applicationForm.user_coronal_photograph_img = this.img1; //冠冕照
				this.applicationForm.user_consumption_proof_img = this.img2; //消费证明
				this.applicationForm.user_other_img = this.img3; //其他材料
				if (!this.applicationForm.user_olitical_outlook) {
					uni.showToast({
						title: '请选择政治面貌',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (!this.applicationForm.user_coronal_photograph_img) {
					uni.showToast({
						title: '请上传冠冕照',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (!this.applicationForm.user_consumption_proof_img) {
					uni.showToast({
						title: '请上传缴费证明',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				this.$requestYz.api.ownerApplication(this.applicationForm).then(res => {
					if (res.data.code == 0) {
						//报名成功
						//返回上一页
						uni.navigateBack({
							delta: 1, //返回层数，2则上上页
						})

						// uni.navigateTo({
						// 	url:'./publicityDetail?id=' + this.publicityId
						// })
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			getVoteUserInfo() {
				this.$requestYz.api.getVoteUserInfoById({
					id: this.applicationForm.voteUserId
				}).then(res => {
					this.voteUserinfo = res.data.data
					this.applicationForm.user_nation = this.voteUserinfo.user_nation
					this.applicationForm.user_olitical_outlook = this.voteUserinfo.user_olitical_outlook
					this.applicationForm.company = this.voteUserinfo.company
					this.applicationForm.user_declaration = this.voteUserinfo.user_declaration
					//回显照片
					//冠冕照
					if(this.voteUserinfo.user_coronal_photograph_img){
						this.imgFlag1 = true;
						this.img1 = this.voteUserinfo.user_coronal_photograph_img
					}
					//缴费证明
					if(this.voteUserinfo.user_consumption_proof_img){
						this.imgFlag2 = true;
						this.img2 = this.voteUserinfo.user_consumption_proof_img
					}
					//辅助材料
					if(this.voteUserinfo.user_other_img){
						this.imgFlag3 = true;
						this.img3 = this.voteUserinfo.user_other_img
					}
				})
			},
			identityFun(index) {
				this.applicationForm.user_olitical_outlook = this.list[index].text;
			},
			//根据身份证号获取信息
			getUserInformationCdo() {
				this.$request.api.getUserInformation({
					userId: this.user_id,
				}).then(res => {
					this.userData = res.data.data
				})
			},
			//前端获取当前时间
			getDate() {
				var _this = this;
				let yy = new Date().getFullYear();
				let mm = new Date().getMonth() + 1;
				let dd = new Date().getDate();
				_this.nowDate = yy + "-" + mm + "-" + dd;
			},
			//关闭图片
			colseImg(status) {
				if (status == 1) {
					this.img1 = ''
					this.imgFlag1 = false;
				 //_this.ruleForm.indoor_images = res.data.data
				} else if (status == 2) {
					this.img2 = ''
					this.imgFlag2 = false;
				} else {
					this.img3 = ''
					this.imgFlag3 = false;
				}
			},
			// 选择图片
			uoloadHouse(status) {
				let _this = this;
				uni.showActionSheet({
					itemList: ['手机拍照', '本地图片上传'],
					success: function(res) {
						if (res.tapIndex == 0) {
							uni.chooseImage({
								count: 9, //默认9
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['camera '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											if (status == 1) {
												_this.img1 = res.data.data;
												_this.imgFlag1 = true;
												//_this.ruleForm.indoor_images = res.data.data
											} else if (status == 2) {
												_this.img2 = res.data.data;
												_this.imgFlag2 = true;
											} else {
												_this.img3 = res.data.data;
												_this.imgFlag3 = true;
											}
										})
									})
								}

							})
						} else {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'],
								sourceType: ['album'],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											if (status == 1) {
												_this.img1 = res.data.data;
												_this.imgFlag1 = true;
												//_this.ruleForm.indoor_images = res.data.data
											} else if (status == 2) {
												_this.img2 = res.data.data;
												_this.imgFlag2 = true;
											} else {
												_this.img3 = res.data.data;
												_this.imgFlag3 = true;
											}
										})
									})
								}

							});
						}
					},
					fail: function(res) {}
				});
			},
		}
	}
</script>

<style lang="scss">
	$color: #333;

	#mySignUp {
		.auth-wrap {
			margin: 20rpx 30rpx;
		}

		.auth-info {
			border-bottom: 1px solid #e3e3e3;

			h5 {
				font-size: 32rpx;
				color: $color;
				font-weight: bold;
			}

			p {
				color: $color;
				font-size: 32rpx;
				width: 440rpx;
				text-align: right;
				font-weight: bold;
			}

			.guarn-box {
				width: 100%;
				height: 216rpx;
			}

			.guarn-box-img {
				width: 216rpx;
				height: 216rpx;
				float: right;
				margin-right: 24rpx;
				text-align: center;
				border: 2rpx solid #ccc;
				border-radius: 4rpx;
			}

			.guarn-box-img image {
				width: 76rpx;
				height: 68rpx;
			}

			.guarn-box2-img {
				height: 216rpx;
				margin-right: 20rpx;
				position: relative;

				.guarn-box2-img-close {
					position: absolute;
					top: 0rpx;
					right: 0rpx;
				}
			}
		}

		.publicity-btn {
			width: 470rpx;
			height: 88rpx;
			color: #fff;
			background: linear-gradient(180deg, #76D904 0%, #417505 100%);
			border-radius: 44rpx;
			margin: 50rpx auto;
			text-align: center;
			line-height: 88rpx;
		}
	}
</style>
